<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        // 防抖：可以让操作再一段时间内只执行一次 ，然后如果重新那么执行时间重新记录
        
    //     var myfn =  function () {
    //         console.log("onmousemove");
    //     }
    //    var newFn =  debounce(myfn,1000);
    //     document.onmousemove = newFn;
        // 当触发第一次的时候 会生成timer 
        // 当第二次触发时候 清空第一个timer 继续生成timer
        // 第三触发时候 会清空第二次生成 timer 继续生成新的timer
        // 。。。。。

        // 防抖 debounce 方式一 ：再delay毫秒之后执行一次fn函数

        // function debounce(fn, delay) {
        //     let timer = null;
        //     return function () {
        //         if (timer) {
        //             clearTimeout(timer);
        //             timer = setTimeout(() => {
        //                 fn();
        //             }, delay);
        //         } else {
        //             timer = setTimeout(() => {
        //                 fn();
        //             }, delay);
        //         }
        //     }
        // }

        // 简化一下代码 
        // function debounce(fn, delay) {
        //     let timer = null;
        //     return function () {
        //         if (timer) {
        //             clearTimeout(timer);
        //         } 
        //         timer = setTimeout(fn, delay);
        //     }
        // }

        // 方式二 ：先执行一次 然后等待delay毫秒时间  ，如果重复触发时间会重新计算；
        function debounce(fn,delay){
            let timer = null;
            return function(){
                /* 
                    if(!timer){
                        fn();
                    }
                    cb && cb();
                    if(cb){
                        cb();
                    }
                */
                !timer && fn();  //立刻执行一次，条件是timer为null（false）;
                clearTimeout(timer);
                timer = setTimeout(() => {
                   timer = null; 
                }, delay);
            }
        }

        var myfn =  function () {
            console.log("onmousemove");
        }
       var newFn =  debounce(myfn,1000);
        document.onmousemove = newFn;
        
        /* 
           一、 事件触发第一次的时候： timer是null （false）-->
                  !timer（true） 会执行一次 fn函数
                  clearTimeout ：清空timer （没有任何作用的,因为timer就是一个null）;
                  生成一个timer （会过 delay毫秒之后执行 timer=null，还在等待执行）
          二、事件触发第二次： timer 有值 ---》！timer 就是false fn函数不执行
                clearTimeout会清除掉第一次生成的timer ，定时器就不会执行了，代表timer=null也没执行
                又生成了一次新的timer 有值  又等待 delay时间之后执行 timer=null操作
          三、.....

          事件触发的条件是：如果事件触发之间的间隔超过了 delay时间，那么才会重新执行一次 fn函数
                
            
        
        
        */
       


    </script>
</body>

</html>